HTML Input Types

HTML इनपुट प्रकार सीखें

HTML इनपुट प्रकार

यह अध्याय HTML <इनपुट> तत्व के विभिन्न प्रकारों का वर्णन करता है।

💡सहायता नोट:

प्रकार विशेषता का डिफ़ॉल्ट मान "पाठ" है।

विभिन्न इनपुट प्रकार जिनका उपयोग HTML में किया जा सकता है:

type="text"
type="password"
type="checkbox"
type="radio"
type="date"
type="email"
type="number"
type="search"

इनपुट प्रकार: टेक्स्ट

<इनपुट प्रकार = "टेक्स्ट"> एकल-पंक्ति टेक्स्ट इनपुट फ़ील्ड को परिभाषित करता है:

उदाहरण

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>



इनपुट प्रकार: पासवर्ड

<इनपुट प्रकार = "पासवर्ड"> एक पासवर्ड फ़ील्ड को परिभाषित करता है:

उदाहरण

<form>
  <label for="username">Username:</label><br>
  <input type="text" id="username" name="username"><br>
  <label for="pwd">Password:</label><br>
  <input type="password" id="pwd" name="pwd">
</form>



पासवर्ड फ़ील्ड में अक्षर छिपे हुए हैं (सितारों या वृत्तों के रूप में दिखाए गए हैं)।

इनपुट प्रकार: सबमिट करें

<इनपुट प्रकार = "सबमिट"> एक्शन-हैंडलर को एक्शन डेटा सबमिट करने के लिए एक बटन को परिभाषित करता है।

स्टेप-हैंडलर आमतौर पर एक सर्वर पेज होता है जिसमें इनपुट डेटा को संसाधित करने के लिए एक स्क्रिप्ट होती है।

एक्शन-हैंडलर को एक्शन की एक्शन विशेषता में निर्दिष्ट किया गया है:

उदाहरण

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>





यदि आप सबमिट बटन की वैल्यू विशेषता को छोड़ देते हैं, तो बटन में एक डिफ़ॉल्ट टेक्स्ट होगा:

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit">
</form>

इनपुट प्रकार: रीसेट करें

<इनपुट प्रकार = "रीसेट"> एक रीसेट बटन को परिभाषित करता है जो सभी चरण मानों को उनके डिफ़ॉल्ट मानों पर रीसेट करता है:

उदाहरण

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
  <input type="reset" value="Reset">
</form>

⚠️नोट:

यदि आप इनपुट मान बदलते हैं और "रीसेट" बटन पर क्लिक करते हैं, तो चरण-डेटा डिफ़ॉल्ट मानों पर रीसेट हो जाएगा।

इनपुट प्रकार: रेडियो

<इनपुट प्रकार = "रेडियो"> एक रेडियो बटन को परिभाषित करता है।

रेडियो बटन उपयोगकर्ता को सीमित संख्या में विकल्पों में से केवल एक का चयन करने की अनुमति देते हैं:

उदाहरण

<p>Choose your favorite Web language:</p>

<form>
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label>
</form>

Choose your favorite Web language:



इनपुट प्रकार: चेकबॉक्स

<इनपुट प्रकार = "चेकबॉक्स"> एक चेकबॉक्स को परिभाषित करता है।

चेक बॉक्स उपयोगकर्ता को सीमित संख्या में विकल्पों में से शून्य या अधिक विकल्प चुनने की अनुमति देते हैं।

उदाहरण

<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label>
</form>


इनपुट प्रकार: बटन

<इनपुट प्रकार = "बटन"> एक बटन को परिभाषित करता है:

उदाहरण

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

अन्य इनपुट प्रकार

type="color"

रंग का चयन करने के लिए उपयोग किया जाता है

<input type="color" id="favcolor" name="favcolor">

type="date"

दिनांक का चयन करने के लिए उपयोग किया जाता है

<input type="date" id="birthday" name="birthday">

type="email"

ईमेल पतों के लिए उपयोग किया जाता है

<input type="email" id="email" name="email">

type="file"

फ़ाइल अपलोड के लिए उपयोग किया जाता है

<input type="file" id="myfile" name="myfile">

type="number"

संख्यात्मक मानों के लिए उपयोग किया जाता है

<input type="number" id="quantity" name="quantity" min="1" max="5">

type="range"

स्लाइडर नियंत्रण के लिए उपयोग किया जाता है

<input type="range" id="vol" name="vol" min="0" max="50">

type="search"

खोज फ़ील्ड के लिए उपयोग किया जाता है

<input type="search" id="gsearch" name="gsearch">

type="tel"

फ़ोन नंबरों के लिए उपयोग किया जाता है

<input type="tel" id="phone" name="phone">

इनपुट नियंत्रण

यहां कुछ सामान्य इनपुट नियंत्रणों की सूची दी गई है:

गुण व्याख्या
checked निर्दिष्ट करता है कि पृष्ठ लोड होने पर एक इनपुट फ़ील्ड पूर्व-चयनित होना चाहिए (प्रकार = "चेकबॉक्स" या प्रकार = "रेडियो" के लिए)।
disabled निर्दिष्ट करता है कि एक इनपुट फ़ील्ड अक्षम किया जाना चाहिए
max किसी इनपुट फ़ील्ड के लिए अधिकतम मान निर्दिष्ट करता है
maxlength किसी इनपुट फ़ील्ड के लिए वर्णों की अधिकतम संख्या निर्दिष्ट करता है
min किसी इनपुट फ़ील्ड के लिए न्यूनतम मान निर्दिष्ट करता है
pattern नियमित अभिव्यक्ति निर्दिष्ट करता है
readonly निर्दिष्ट करता है कि एक इनपुट फ़ील्ड चरण-केवल (बदला हुआ) है।
required इंगित करता है कि एक इनपुट फ़ील्ड आवश्यक है (भरने के लिए)।
size किसी इनपुट फ़ील्ड की चौड़ाई (वर्णों में) निर्दिष्ट करता है
step किसी इनपुट फ़ील्ड के लिए कानूनी संख्यात्मक अंतराल निर्दिष्ट करता है
value किसी इनपुट फ़ील्ड के लिए डिफ़ॉल्ट मान निर्दिष्ट करता है

📚अतिरिक्त शिक्षा:

आप अगले अध्याय में इनपुट नियंत्रण के बारे में अधिक जानेंगे।

उदाहरण

निम्नलिखित उदाहरण में आप 10 के चरणों में 0 से 100 तक का मान दर्ज कर सकते हैं। डिफ़ॉल्ट मान 30 है:

<form>
  <label for="quantity">Quantity:</label>
  <input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="30">
</form>

अभ्यास

INPUT तत्व में प्रकार विशेषता का डिफ़ॉल्ट मान क्या है?

button
✗ ग़लत! बटन प्रकार विशेषता का डिफ़ॉल्ट मान नहीं है
submit
✗ ग़लत! सबमिट बटन का उपयोग चरण सबमिट करने के लिए किया जाता है, लेकिन यह डिफ़ॉल्ट नहीं है
text
✓ ठीक है! प्रकार विशेषता का डिफ़ॉल्ट मान "पाठ" है।

HTML इनपुट प्रकार विशेषता

टैग व्याख्या
<input type=""> प्रदर्शित करने के लिए इनपुट का प्रकार निर्दिष्ट करता है

🎯महत्वपूर्ण बिंदु:

  • प्रकार विशेषता इनपुट नियंत्रण के प्रकार को निर्धारित करती है
  • डिफ़ॉल्ट मान "पाठ" है.
  • विभिन्न प्रकार के मान अलग-अलग इनपुट बाधाएँ पैदा करते हैं
  • प्रत्येक प्रकार का मान विशिष्ट उपयोग के मामलों के लिए उपयुक्त है